<template>
    <div class="jianzhuForm">
        <div class="title">请选择需要开户的区域或设备</div>
        <el-tree
            :data="data"
            style="height: 300px; overflow: auto"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[defaultId]"
            :check-strictly="true"
            ref="tree"
        >
        </el-tree>
        <div class="radioList">
            <el-radio v-model="radio" label="0" @change="radioChange">按建筑区域单位开户</el-radio>
            <el-radio v-model="radio" label="1" @change="radioChange">按设备名称开户</el-radio>
            <label>账户初始化时间</label>
            <el-date-picker
                v-model="time"
                type="date"
                disabled
                placeholder="选择日期"
                style="width: 160px; margin-right: 10px; margin-left: 10px"
            >
            </el-date-picker>
            <el-checkbox v-model="checked" @change="changeCheck">实时</el-checkbox>
            <label>账户名称：</label>
            <el-input
                type="text"
                v-model="acName"
                minlength="4"
                placeholder="请输入账户名称"
                style="width: 140px"
                maxlength="20"
            ></el-input>
            <label style="color: red; margin-left: 5px">合并开户操作必填</label>
        </div>
        <div style="text-align: right; margin-top: 10px">
            <el-button type="primary" @click="plkhOrHb(1)">合并开户</el-button>
            <el-button type="primary" @click="plkhOrHb(0)">批量开户</el-button>
            <el-button @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import moment from 'moment'
export default {
    components: {},
    // props: ["formData"],
    data() {
        return {
            radio: '0',
            time: moment().format('YYYY-MM-DD'),
            defaultId: '',
            checked: true,
            data: [],
            acName: '',
            defaultProps: {
                children: 'children',
                label: 'text'
            }
        }
    },
    computed: {},
    created() {
        this.getData()
    },
    mounted() {
        this.$nextTick(() => {})
    },
    methods: {
        async plkhOrHb(czType) {
            // 获取所有选中的节点对象
            var checkedNodes = this.$refs.tree.getCheckedNodes(true)
            if (checkedNodes.length == 0) {
                PopupCommon.notify('info', '请至少选择一个建筑或设备')
                return
            }
            const ids = checkedNodes.map((t) => t.id).toString()
            if (czType == '1') {
                if (this.acName == '' || this.acName.length < 4 || this.acName.length > 20) {
                    PopupCommon.notify('info', '合并账户时请填写4-20位的账户名称')
                    return
                }
            }
            const res = await AjaxCommon(`/api/OpenAccount/OpenAccounts`, 'post', {
                eq_bd_guids: ids,
                /** 类型 0按建筑 1按设备 */
                openType: this.radio,
                // 操作类型 0批量开户 1合并开户
                czType: czType,
                /** 初始化时间（当勾选为实时传RT，不按实时传时间yyyy-MM-dd hh:mm:ss） */
                initTime: this.checked ? 'RT' : moment().format('YYYY-MM-DD HH:mm:ss'),
                /** 合并账户名称（批量开户时传空，合并账户时必传） 需4-20位 */
                acName: this.acName
            })
            if (res.data.Code == 200) {
                PopupCommon.notify('sucess', '操作成功')
                this.$emit('success', '')
            } else {
                let data = res?.data?.Message ?? '操作失败'
                PopupCommon.notify('fail', data)
            }
        },
        formatData(params) {
            let data = params
            data.map((item) => {
                if (item.hasOwnProperty('children') && item.children.length > 0) {
                    item.disabled = true
                    this.formatData(item.children)
                }
            })
            return data
        },
        changeCheck(e) {
            if (e) {
                this.time = moment().format('YYYY-MM-DD')
            } else {
                this.time = null
            }
        },
        radioChange(e) {
            this.radio = e
            this.getData()
        },
        getData() {
            let self = this
            self.data = []
            AjaxCommon(`/api/OpenAccount/GetTreeNodes?type=${this.radio}`, 'get', null).then((res) => {
                if (res?.data?.Code == 200) {
                    let data = res.data.Message
                    data = this.formatData(data)
                    self.data = data
                    self.defaultId = data?.[0]?.id ?? ''
                } else {
                    const msg = res?.data?.Message
                    if (msg) {
                        PopupCommon.notify('error', msg)
                    }
                }
            })
        },
        cancel() {
            this.$emit('close', '')
        }
    }
}
</script>

<style lang="scss" scoped>
.jianzhuForm {
    position: relative;
    top: -15px;
    .radioList {
        margin-top: 10px;
        border-top: 1px solid #e0e0e0;
        padding-top: 10px;
    }
    .title {
        text-align: center;
        font-size: 18px;
        color: #000;
        padding-bottom: 10px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 10px;
    }
}
</style>
